
const { useState,useEffect,useReducer } = React ;



const RepeatButton = (props)=>{
  return <button ariaLabel='Play again.' id="repeatButton" onClick={props.onClick}></button>
}



const App = () => {
  const loser = ['Not quite', 'Stop gambling', 'Hey, you lost!', 'Ouch! I felt that', 'Don\'t beat yourself up', 'There goes the college fund', 'I have a cat. You have a loss', 'You\'re awesome at losing', 'Coding is hard', 'Don\'t hate the coder'];
  let [winner,setWinner] = useState(null);
  let matches = [];
  const emptyArray = ()=>  matches = [];
  const finishHandler = (value)=>{
    matches.push(value);
    if(matches.length===3){
      let results = matches.every(match=> match === matches[0]);
      setWinner(results);
    }
  };
  let children = new Array(3);
  const handleClick = ()=>{
    setWinner(null);
    emptyArray();
    children.forEach(child => {
      child.forceUpdateHandler();
    });
  };

  const getLoser = ()=> loser[Math.floor(Math.random() * loser.length)];

  
  return (<div>

    <h1 style={{color : 'white'}}>
      <span>{winner === null ? 'Waiting…'
              : winner ? '🤑 Pure skill! 🤑' : getLoser()
              }
      </span>
    </h1>
    <div className='spinner-container' >
      <Spinner onFinish={finishHandler} timer='1000' ref={child=>children[0]=child}></Spinner>
      <Spinner onFinish={finishHandler} timer='1400' ref={child=>children[1]=child}></Spinner>
      <Spinner onFinish={finishHandler} timer='2200' ref={child=>children[2]=child}></Spinner>
      <div className='gradient-fade'></div>
    </div>
    { (winner !== null) &&  <RepeatButton onClick={handleClick}></RepeatButton> }
  </div>)
}


class Spinner extends React.Component {
  
  constructor(props){
    super(props);

    this.state = {
      position: 0,
      lastPosition: null
    }
    this.multiplier = Math.floor(Math.random() * (4 - 1) + 1);
    this.start = this.setStartPosition();
    this.speed = this.iconHeight() * this.multiplier;
    this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  }
  iconHeight(){
    return 188;
  }
  forceUpdateHandler(){
    this.reset();
  }
  reset(){

    if (this.timer) {
      clearInterval(this.timer);
      
      this.start = this.setStartPosition();
      
      this.setState({
        position: this.start,
        timeRemaining: this.props.timer
      });

      this.timer = setInterval( ()=> {
        this.tick();
      }, 100);
    }

  }
  setStartPosition(){
    return Math.floor(Math.random() * 9) * this.iconHeight() * -1;
  }
  moveBackground(){
    this.setState({
      position: this.state.position - this.speed,
      timeRemaining: this.state.timeRemaining - 100
    });
  }
  getSymbolFromPosition(){

    let totalSymbols = 9;
    let maxPosition = this.iconHeight() * (totalSymbols - 1) * -1;
    let moved = this.props.timer / 100 * this.multiplier;
    let startPosition = this.start;
    let currentPosition = startPosition;

    for (var i = 0; i < moved; i++) {
      currentPosition -= this.iconHeight();

      if (currentPosition < maxPosition) {
        currentPosition = 0;
      }
    }

    this.props.onFinish(currentPosition);
  }
  tick(){
    if (this.state.timeRemaining <= 0) {
      clearInterval(this.timer);
      this.getSymbolFromPosition();
    } else {
      this.moveBackground();
    }
  }
  componentDidMount(){

    clearInterval(this.timer);

    this.setState({
      position: this.start,
      timeRemaining: this.props.timer
    });

    this.timer = setInterval( ()=> {
      this.tick();
    }, 100);
  }
  render(){
    const position = this.state.position;
    return <div style={{ backgroundPosition: '0px ' + position + 'px' }} className="icons">

    </div>
  }
}



ReactDOM.render(React.createElement(App,null),document.getElementById('app'));

